<template>
    <view class="sunbath-product-select" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <search-bar :placeholderText="placeholderText" :setBg="true" @searchFn="searchFn" />
        <select-headr @clickTab="handleTabClick" :data="category" />
        <select-empty />
        <view class="main">
                <select-main ref="selectmain" v-if="load" :height="listHeight" :requestData="requestData"/>
        </view>
        <select-bottom />
    </view>
</template>

<script>
import { GetProductCategoryList } from "@/service/api/baskOrder.js"
import searchBar from "@/components/common/search-bar.vue"
import selectHeadr from "./selectChildCpns/select-header.vue"
import selectEmpty from "./selectChildCpns/select-empty.vue"
import selectMain from "./selectChildCpns/select-main.vue"
import selectBottom from "./selectChildCpns/select-bottom.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import { mapActions } from "vuex"

export default {
    components: {
        searchBar,
        selectHeadr,
        selectMain,
        selectEmpty,
        selectBottom,
    },
    data() {
        return {
            config: {
                title: "选择晒单商品",
                color: ["#ffffff"],
                back: false,
            },
			requestData: {
			    searchKey: "",
			    productCategoryId:0,
				pageIndex:1,
				pageSize:10,
			},
			category:[{ID:0,Name:"全部"}],
            placeholderText: "请输入商品名称",
			listHeight: 0,
			load:false
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
	mounted() {
		this.getListHeight()
		this.categoryList()
	},
    methods: {
        ...mapActions("sunbathing", ["fetchSunbathSelList"]),
		getListHeight(element) {
		    //获取列表高度
		        getElementHeight(this, ".main", (e) => {
		            //再获取列表高度
		            this.listHeight = e - uni.upx2px(130) + "px"
		            this.load = true
		        })
		},
		categoryList(){
			GetProductCategoryList().then(res=>{
				if(res.State==1){
					this.category = this.category.concat(res.Data)
				}else{
					this.easyToast(res.Msg)
				}
			})
		},
        searchFn(val) {
            console.log("val:", val)
			this.requestData.searchKey = val
			this.$refs.selectmain.refresh(this.requestData)
        },
        handleTabClick(index) {
            this.requestData.productCategoryId = this.category[index].ID;
			setTimeout((e) =>{
				this.refresh()
			},300)
        },
		refresh(){
			this.$refs.selectmain.refresh(this.requestData)
		}
    },
}
</script>

<style lang="scss">
// .sunbath-product-select {
//     height: 100vh;
//     overflow: hidden;
//     color: $color-gray-1;

    .main {
        margin-top: -40rpx;
		min-height: 50vh;
    }
// }
</style>
